<!-- 产品列表组件使用说明 -->
<!-- 
	该组件用于 发现列表、商场同款列表、排行榜列表
	在排行榜列表中不显示国家图标
	ranking 有参数的情况下不显示国家图标
	ranking 也用于排行榜的数字累加
 -->
<template>
	<view class="goods-cell">
		<navigator class="productleft" >
			<image class="country" v-if="!ranking" :src="item.country"></image>
			<view class="ranking" v-if="ranking">{{ranking}}</view>
			<image class="product-image" :src="item.goods_img"></image>
		</navigator>
		<view class="productinfo">
			<navigator class="sellser_box">
				<image class="seller_logo" :src="item.seller_logo"></image>
				<view class="seller_name">{{item.seller_name}}</view>
				<view class="enter_seller">进入店铺</view>
			</navigator>
			<view class="cell-tit">{{item.title}}</view>
			<view class="sales-share">
				<view class="sales"><i class="coolc icon-faxian"></i><span>销量{{item.sales_num}}</span></view>
				<view class="share"><i class="coolc icon-fenxiang1"></i><span>{{item.share}}人转发</span></view>
			</view>
			<view class="goods_price">
				<view class="selling_price">￥{{item.price}}</view>
				<view class="originalPrice">￥{{item.originalPrice}}</view>
				
				<navigator class="coolc icon-gouwuche"></navigator>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.goods-cell { 
	width:100%; height:auto; display:table; border-bottom:1px solid #eeeeee; padding:$page-p-20;
	
	.productleft { 
		width:280upx; height:280upx; float:left; border:1px solid #eeeeee; position:relative; overflow:hidden;
		.ranking { width:18px; height:27px; line-height:20px; color:#ffffff; font-size:12px; text-align:center; position:absolute; z-index:9; left:12upx; top:0px; display:block; background:url(/static/img/bg/sprite.png) no-repeat 0 -87px; }
		.country { width:36upx; height:36upx; position:absolute; z-index:9; left:10upx; top:10upx; }
		.product-image { width:280upx; height:280upx; }
	}

	.productinfo {
		width:390upx; height:280upx; float:right; position:relative; overflow:hidden;
		.sellser_box { 
			width:100%; height:90upx; position:relative; padding-left:130upx;
			
			.seller_logo { width:115upx; height:80upx; position:absolute; left:0px; top:0px; border:1px solid #eeeeee; }
			.seller_name { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; }
			.enter_seller { width:120upx; height:40upx; line-height:40upx; text-align:center; font-size:$font-sm; border-radius:5upx; margin-top:10upx; background:#b39369; color:#ffffff; }
		}
		.cell-tit { width:100%; height:70upx; overflow:hidden; color:$font-color-666; line-height:35upx; font-size:$font-base; }
		.sales-share { 
			width:100%; height:50upx; padding-top:8upx;
			 
			.coolc { margin-right:12upx; font-size:$font-sm; }
			.sales { float:left; padding-right:24upx; color:#cccccc; font-size:$font-sm; }
			.share { float:left; color:#cccccc; font-size:$font-sm; }
		}
		.goods_price { 
			width:100%; height:70upx; position:relative; padding-top:5upx;
			
			.selling_price { width:100%; height:40upx; line-height:40upx; font-weight:bold; font-size:34upx; color:#e00000; }
			.originalPrice { width:100%; height:30upx; line-height:30upx; color:#cccccc; font-size:$font-sm; text-decoration:line-through; }
			.coolc { width:60upx; height:60upx; line-height:60upx; border-radius:60upx; right:0px; top:10upx; position:absolute; text-align:center; background:#8c0027; color:#ffffff; overflow:hidden; }
		}
	}
}
.goods-cell:nth-child(1) .ranking { background:url(/static/img/bg/sprite.png) no-repeat 0 0px; }
.goods-cell:nth-child(2) .ranking { background:url(/static/img/bg/sprite.png) no-repeat 0 -29px; }
.goods-cell:nth-child(3) .ranking { background:url(/static/img/bg/sprite.png) no-repeat 0 -58px; }
</style>
<script>
export default {
	data() {
		return {

		}
	},
	props:{
		item:{
			type: Object
		},
		ranking:{
			type: Number,
			default: 0
		}
	},
	
	methods: {

	}
}
</script>